<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>神奇动物在哪里？</title>
	</head>
	<style>
		*{
			padding:0px;
			margin: 0px;
		}
		#header {
        background-color: lightblue;
        height: 80px;
        }
        #p1{
        	font-size: 50px;
        	color: white;
        }
	   .top{
	    height: auto; 
	    width:100%;
	    margin: 0;
	    background-color: cadetblue;
	    position: fixed; 
	    top: 80px;
	    margin-bottom: 5px;
		}
	.top ul{
	    width: auto;
	    list-style-type: none;
	    white-space:nowrap;
	    overflow: hidden;
	    margin-left: 10%;
	    padding: 0;
	    
	
	}
	.top li {
	    float:left; /* 使li内容横向浮动，即横向排列  */
	    margin-right:12%;  /* 两个li之间的距离*/
	    position: relative;
	    overflow: hidden;
	    
	}
	
	.top li a{
	   /* 设置链接内容显示的格式*/
	    display: block; /* 把链接显示为块元素可使整个链接区域可点击 */
	    color:white;
	    text-align: center;
	    padding: 3px;
	    overflow: hidden;
	    text-decoration: none; /* 去除下划线 */
	    
	}
	.top li a:hover{
	    /* 鼠标选中时背景变为黑色 */
	    background-color: #111;
	}
	.happy
	{
		margin-top: 27px;
		width:1276px;
		height:559px;
		overflow: hidden;
		padding-top: 20px;
	}
	.love
	{
		width:300px;
	}
	.love img
	{
		float:left;
		margin:30px;
		width:100%;
	}
	.you
	{
		float:left;
		width:
	}
	</style>
	<body>
		<div id="header">
			<p id="p1" align="center">神奇动物在哪里？</p>
		</div>
		<div class="top">
			<center>
			<ul >
				<li >
					<a href="index.html" title="Fish">鱼类</a>
				</li>
				<li >
					<a href="1.html" title="Reptiles">爬行类</a>
				</li>
				<li >
					<a href="2.html" title="Birds">鸟类</a>
				</li>
				<li >
					<a href="3.html" title="Mammals">哺乳类</a>
				</li>
				<li >
					<a href="4.html" title="Arthropods">节肢类</a>
				</li>
			</ul></center>
		</div>
		<div class="happy">
			<div class="love">
				<img src="img/爬行类.jpg" alt=" "/>
			</div>
			
			<div>
				<div class="you">
					<h1>爬行类</h1>
					<p>
						特征：陆生动物，皮肤有鳞片或盾片覆盖.，一般具有防水外皮，水份散失.。属变温动物（靠外界的温度或热源来改变其体温)。<br />
					        主要分布在地球较温暖的地区。体内受精，卵生或卵胎生.在陆地产卵，卵有防水外壳包裹。<br /><br />
                                               爬行动物的分类：<br />
                                                有足类<br />
						例：乌龟<br />
                                                特征：有坚硬的外壳。上下颔不具齿，但有角质鞘。卵生，可分陆栖，水栖或海洋生活。<br /><br />
                                                无足类<br />
                                                例：眼镜蛇<br />
                                                特征：无四肢，肩带及胸骨。不具活动的眼脸及外耳孔。舌头末端分叉，伸缩力强。皮肤有鳞片，可吞咽比自己身体直径大的猎物.<br />
                                                蛇的器官俱备特化成长形，左肺退化。蛇会定期蜕皮，能使自己不断进行成长，便于繁衍。<br />
					</p>
				</div>
			</div>
		</div>
<audio src="img/蛇.mp3" autoplay="autoplay"></audio>
	</body>
</html>
